<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓考人数各个学院占比</title>
    <script src="../../static/js/echarts.js"></script>
    <!--    <script src="../../static/js/echarts.js"></script>-->
    <style>
        #main {
            width: 100%;
            height: 95%;
            margin: auto;
            position: absolute;
            top: 5%;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<button onclick='location.href="index.html"'>返回</button>
<div id="main" style="width: 1400px;height:900px;"></div>
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    const option = {
        title: {
            text: '缓考人数各个学院占比',
            left: 'center',
            textStyle: {
                fontSize: 24 // 设置标题字体大小为 24px
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right'
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 20 // 设置字体大小
                        }
                    }
                },

                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{
                        label:{
                            show: true,
                            formatter: '{b} : {c} ({d}%)' //带当前图例名 + 百分比
                        },
                        labelLine :{show:true}
                    },
                    borderWidth: 2,
                    borderRadius: 10,
                },
                labelLine: {
                    smooth: 0.5, // 使标签线平滑地偏离饼图边缘
                    length: 20, // 标签线长度
                    length2: 30, // 第二段线长度
                },data: [
                    {
                        value: 808,
                        name: '数学与信息工程学院',
                    },
                    {
                        value: 623,
                        name: '建筑工程学院'
                    },
                    {
                        value: 361,
                        name: '能源与化工工程学院'
                    },
                    {
                        value: 384,
                        name: '经济管理学院'
                    },
                    {
                        value: 115,
                        name: '生物与食品工程学院'
                    },
                    {
                        value: 230,
                        name: '人文学院'
                    },
                    {
                        value: 402,
                        name: '机电与汽车工程学院'
                    },
                    {
                        value: 564,
                        name: '外语与旅游学院'
                    },
                    {
                        value: 461,
                        name: '体育健康学院'
                    },
                    {
                        value: 1761,
                        name: '教育科学学院'
                    },
                    {
                        value: 334,
                        name: '艺术学院'
                    },
                    {
                        value: 51,
                        name: '大数据学院'
                    }
                ],

            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>